<template>
	<view class="discover">
		<u-navbar :placeholder="true" leftIconColor="#fff">
			<view class="u-nav-slot both-center" slot="center">
				<view class="title">
					发现
				</view>
			</view>
		</u-navbar>
		<!-- <view class="status_bar"></view> -->
		<view class="box pt-2 col ">
			<SubTitle title="热点问题 · 星空问答" label="查看更多" icon="../../static/svg/greenArrow.svg" :showline="false"
				@send="link()" />
			<Suggest type="编辑推荐" label="更高的工资和更有前景的学习机会，应该选择哪个呢?" @send="link()" />
			<Suggest type="编辑推荐" label="以及，我作为知识星球现有用户，应该怎样使用这款产品？" @send="link()" />
		</view>
		<view class="box ">
			<SubTitle title="你可能感兴趣" label="换一批" icon="../../static/svg/refresh.svg" :showline="true" @send="go()" />
			<Group />
			<Group />
			<Group />
		</view>
		<view>
			<image class="banner"
				src="https://img1.baidu.com/it/u=587102963,2526601009&fm=253&fmt=auto&app=138&f=PNG?w=1371&h=500"
				mode=""></image>
		</view>
		<view class="box pt-2">
			<SubTitle title="精华主题" label="换一批" icon="../../static/svg/greyRefresh.svg" :showline="true" @send="go()" />
			<Activity />
			<Activity />
			<Activity />
		</view>
		<!-- <view class="edgeInsetBottom"></view> -->
		<Rank />
		<view class="tab-box">
			<view class="tab">
				<u-tabs :list="list1" lineColor="transparent" :inactiveStyle="inactive" :activeStyle="active"
					:current="current"
					itemStyle="margin: 8px 12px 8px 0;font-size:12px;border-radius: 1vw;height:4vh; padding: 0; background: #f6f6f6; color:rgba(210, 210, 210, 1.0); font-weight:bold;"
					@change="tabchange">
					<view slot="right" style="border-left: 1px solid #f0f0f0;" @tap="$u.toast('插槽被点击')">
						<u-icon name="list-dot" size="28"></u-icon>
					</view>
				</u-tabs>
			</view>
			<view class="">
				<swiper :current="swiperCurrent" @change="transition" class="swipeHeiht">
					<swiper-item class="swiper-item mwidth" v-for="(item, index) in newslist" :key="index">
						<scroll-view scroll-y style="height:100%;width: 100%;" @scrolltolower="">
							<view class="study">
								<block v-if="study_list.length==0">
									<u-empty mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png">
									</u-empty>
								</block>
								<block v-for="(item1,index1) in study_list" :key="index1">
									<Study :data="item1" />
								</block>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import SubTitle from '@/components/sub-title/sub-title.vue'
	import Group from '@/components/group-card/group-card.vue'
	import Suggest from '@/components/Suggest/Suggest.vue'
	import Activity from '@/components/activity-card/activity-card.vue'
	import Rank from '@/components/rank-card/rank-card.vue'
	import Study from '@/components/study-card/study-card.vue'
	export default {
		props: {},
		components: {
			SubTitle,
			Group,
			Suggest,
			Activity,
			Rank,
			Study
		},
		data() {
			return {
				active: {
					fontWeight: 'bold',
					transform: 'scale(1.05)',
					background: '#18b897',
					color: '#FFFFFF !important',
					borderRadius: '6px',
					padding: '1vh 3vw',
					fontSize: '13px'
				},
				inactive: {
					background: '#f6f6f6',
					padding: '1vh 3vw',
					borderRadius: '6px',
				},
				swiperCurrent: 0,
				current: 0,
				newslist: [{
					name: 'xx'
				}, {
					name: 'yy'
				}, {
					name: 'zz'
				}],
				list1: [{
					name: '全部',
				}, {
					name: '行业交流',
				}, {
					name: '编程开发'
				}, {
					name: '设计美学'
				}, {
					name: '美食分享'
				}, {
					name: '历史文化'
				}],
				study_list: [{
					studyimg: 'https://img0.baidu.com/it/u=784891191,922901063&fm=253&fmt=auto&app=138&f=JPEG?w=150&h=149',
					studyname: '国学',
					leader: '智享圈主编',
					leanernum: 4800
				},{
					studyimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F4%2F3b%2F15bd796379_130_170.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664868911&t=0a448015a3713d11f045b265f819691c',
					studyname: '美与艺术',
					leader: '智享圈主编',
					leanernum: 4800
				},
				{
					studyimg: 'https://img1.baidu.com/it/u=711923723,499158654&fm=253&fmt=auto&app=138&f=JPEG?w=220&h=175',
					studyname: '雕刻之美',
					leader: '智享圈主编',
					leanernum: 4800
				},{
					studyimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2Ftx20%2F280417010314405.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664869093&t=6ce83e12a05e8fa08a3208c9e4b40743',
					studyname: '每日一本书',
					leader: '智享圈主编',
					leanernum: 4800
				},{
					studyimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fe8%2F94%2F77%2Fe894774a0a0b7edb0f524361b50665dd.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664870223&t=7540a98ead9c4336179fc9a6f535ea8f',
					studyname: '萌宠时刻',
					leader: '智享圈主编',
					leanernum: 4800
				}]
			}
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.showToast({
					title: "刷新成功",
					icon: 'none'
				})
				uni.stopPullDownRefresh()
			}, 300);
		},
		methods: {
			go() {
				uni.switchTab({
					url: '../me/me'
				})
			},
			link() {
				uni.navigateTo({
					url: '../starAsk/starAsk'
				})
			},
			tabchange(e) {
				// console.log(e);
				this.swiperCurrent = e.index;
			},
			//滑动swiper后的下标  绑定给tab栏index		
			transition(e) {
				// console.log(e);
				this.current = e.detail.current
			},
		}
	}
</script>

<style scoped>
	.swipeHeiht {
		height: calc(100vh - 280px);
	}
	
	.discover {
		width: 100%;
		padding: 0 16px;
	}

	.box {
		padding: 10px 0 16px;
	}

	.pt-2 {
		padding-top: 6px;
	}

	.banner {
		width: 100%;
		height: 136px;
		border-radius: 8px;
		background: #D8D8D8;
	}

	.title {
		font-family: PingFangSC-Semibold;
		font-size: 16px;
		font-weight: 700;
		line-height: 20px;
		letter-spacing: 1vw;
		color: rgba(0, 0, 0, 0.8);
	}
</style>
